<template>
  <div>
    <!-- 增加角色-->
    <el-form
      ref="ruleForm"
      v-loading="loading"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      label-position="right"
    >
      <el-form-item label="角色名称：" prop="roleName">
        <el-input v-model="ruleForm.roleName" />
      </el-form-item>
      <el-form-item label="医院：" prop="hospitalId">
        <el-select
          v-model="ruleForm.hospitalId"
          placeholder="请选择"
          class="el-select-y"
          @change="nameSelect"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.hospitalName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="权限设置：">
        <el-cascader
          v-model="ruleForm.jurisdictionList"
          :options="jurisdiction"
          :props="toConfigure"
          collapse-tags
          multiple
          clearable
          style="width: 100%"
          class="el-select-y"
          @change="valChange"
        />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-radio v-model="ruleForm.status" label="启用" />
        <el-radio v-model="ruleForm.status" label="停用" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    row: {
      type: Object,
      default: () => ({}),
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      value: "",
      options: [],
      ruleForm: {
        status: "启用",
      },
      toConfigure: {
        multiple: true,
      },
      jurisdiction: [],
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
        hospitalId: [
          { required: true, message: "请选择医院", trigger: "change" },
        ],
      },
      loading: false,
    };
  },
  mounted() {
    if (this.row.id) {
      this.ruleForm = JSON.parse(JSON.stringify(this.row));
    }
    this.getAllHospital();
    this.allJurisdiction();
  },
  methods: {
    jurisdictionHandle(id, lists) {
      let ids = [];
      for (let i = 0; i < lists.length; i++) {
        if (id === lists[i].id) {
          ids = lists[i].ids;
          break;
        }
        if (lists[i].children && lists[i].children.length > 0) {
          ids = ids.concat(this.jurisdictionHandle(id, lists[i].children));
        }
      }
      return ids;
    },
    async getAllHospital() {
      const res = await this.$api["data/dept/getAllHospital"]();
      if (res.code !== 200) return;
      this.options = res.data;
    },
    async allJurisdiction() {
      const res = await this.$api["data/role/allJurisdiction"]({ aaa: {}});
      this.jurisdiction = this.listHandle(res.data);
      this.jurisdiction = this.idsHandle(this.jurisdiction);
      if (this.row.id) {
        const list = [];
        this.ruleForm.roleMenuEntityList.forEach((item) => {
          const listHandle = this.jurisdictionHandle(
            item.menuId,
            this.jurisdiction
          );
          list.push(listHandle);
        });
        const jurisdictionList = [];
        list.forEach((item) => {
          if (item[0]) {
            if (item[0].indexOf(",") >= 0) {
              jurisdictionList.push(item[0].split(","));
            } else {
              jurisdictionList.push(item);
            }
          }
        });
        this.ruleForm.jurisdictionList = jurisdictionList;
      }
    },
    idsHandle(list, ids) {
      ids = ids || "";
      list.forEach((item) => {
        item.ids = ids ? ids + "," + item.id : item.id;
        if (item.children && item.children.length > 0) {
          item.children = this.idsHandle(item.children, item.ids);
        }
      });
      return list;
    },
    listHandle(list) {
      const allList = [];
      list.forEach((item) => {
        const json = {};
        Object.assign(json, item);
        json.label = json.name;
        json.value = json.id;
        if (item.children && item.children.length > 0) {
          json.children = this.listHandle(item.children);
        }
        allList.push(json);
      });
      return allList;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) return;
        this.loading = true;
        if (!this.row.id) {
          this.$api["data/role/addHisrole"]({
            ...this.ruleForm,
          })
            .then((res) => {
              if (res.code !== 200) return;
              this.$emit("success");
              this.msgSuccess("增加岗位成功");
            })
            .finally(() => (this.loading = false));
        } else {
          const roleMenuEntityList = [];
          this.row.roleMenuEntityList.forEach((item) => {
            roleMenuEntityList.push(item.menuId);
          });
          if (this.ruleForm.roleMenuEntityList[0].id) {
            this.ruleForm.roleMenuEntityList = [];
          }
          this.$api["data/role/modifyHisrole"]({
            ...this.ruleForm,
          }).then((res) => {
            if (res.code !== 200) return;
            this.$emit("success");
            this.$emit("update:isEdit", false);
            this.msgSuccess("修改岗位成功");
          });
        }
      });
    },
    nameSelect(id) {
      this.options.forEach((item) => {
        if (item.id === id) {
          this.ruleForm.hospitalName = item.hospitalName;
        }
      });
    },
    valChange(val) {
      console.log(val);
      const list = [];
      val.forEach((item) => {
        list.push({ menuId: item[item.length - 1] });
      });
      this.ruleForm.roleMenuEntityList = list;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
  margin-bottom: 18px;
}
</style>
